<script setup>
import api from '../api/commitApi.js'
import { ref, onMounted, computed } from "vue"
import lodash from "lodash";
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

// 获取路由对象
const router = useRouter();
//定义绑定的数据
//表格中的数据
const tableData = ref({});
const total=ref(0);
const editWinVisible = ref(false);
//查询数据
const searchObj = ref({
  current: 1,
  limit: 11,
  total: 0,
});

//要修改或者新增的数据
const obj = ref({});

// 页面加载后使用默认查询条件查询数据
onMounted(async () => {
  await searchStation();
})

// 查询车票的方法
const searchStation = async () => {
  tableData.value = await api.page(searchObj.value);
  console.log('查询车票条件:', searchObj.value)
  console.log('查询车票:', tableData.value)
  total.value = tableData.value.count;
}



//订单详情
const handleCommit = async(index, row) => {
  console.log(index, row)
  obj.value=lodash.clone(row);
  console.log('订单详情:', obj.value)
  editWinVisible.value=true;
}

//前一页
const handleSizeChange=() => {
  searchStation();
}
//后一页
const handleCurrentChange=(val) => {
  searchStation();
}
//查询
const handleSearch=async () => {
  searchObj.value.current = 1;
  searchStation();
}
//取消修改操作
const editCancel = () => {
  obj.value = {};//清空数据
  editWinVisible.value = false;//关闭对话框
}

//定义方法
const search = ref('')
const filterTableData = computed(() =>
    tableData.value.data?.filter(
        (data) =>
            !search.value ||
            data.node.toLowerCase().includes(search.value.toLowerCase())
    ) || []
)







</script>

<template>
  <!-- 数据展示区域 -->
  <!-- 车票表格 -->
  <el-table :data="filterTableData" style="width: 100%; margin-top: 20px;">
    <el-table-column label="出发站" prop="fromStationName"/>
    <el-table-column label="到达站" prop="toStationName"/>
    <el-table-column label="出发时间" prop="departTime"/>
    <el-table-column label="到达时间" prop="arriveTime"/>
    <el-table-column label="订单状态" prop="status"/>
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button
            size="small"
            type="primary"
            @click="handleCommit(scope.$index, scope.row)"
        >
          订单详情
        </el-button>

      </template>
    </el-table-column>
  </el-table>

  <!--分页-->
  <el-pagination
      v-model:current-page="searchObj.current"
      v-model:page-size="searchObj.limit"
      :page-sizes="[1, 2, 3, 4]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />


  <!--订单详情对话框表单-->
  <el-dialog v-model="editWinVisible" title="订单详情" width="600">
    <el-form :model="obj" label-width="120px">
      <!-- 乘车人姓名和乘车人身份证在同一行 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="乘车人姓名">
            <el-input v-model="obj.realName" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="乘车人身份证">
            <el-input v-model="obj.idCard" readonly />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 出发站和到达站在同一行 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="出发站">
            <el-input v-model="obj.fromStationName" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="到达站">
            <el-input v-model="obj.toStationName" readonly />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 出发时间和到达时间在同一行 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="出发时间">
            <el-input v-model="obj.departTime" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="到达时间">
            <el-input v-model="obj.arriveTime" readonly />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 总历时 -->
      <el-form-item label="总历时(分钟)">
        <el-input v-model="obj.durationMinutes" readonly />
      </el-form-item>

      <!-- 票价 -->
      <el-form-item label="票价(元)">
        <el-input v-model="obj.totalAmount" readonly />
      </el-form-item>

      <!-- 列车编号 -->
      <el-form-item label="列车编号">
        <el-input v-model="obj.trainNode" readonly />
      </el-form-item>

      <!-- 列车类型 -->
      <el-form-item label="列车类型">
        <el-input v-model="obj.trainType" readonly />
      </el-form-item>

      <!-- 列车运行状态 -->
      <el-form-item label="订单状态">
        <el-input v-model="obj.status" readonly />
      </el-form-item>

      <!-- 订单创建时间 -->
      <el-form-item label="订单创建时间">
        <el-input v-model="obj.createTime" readonly />
      </el-form-item>

      <!-- 订单支付时间 - 仅在已支付状态下显示 -->
      <el-form-item label="订单支付时间" v-if="obj.status === '已支付'">
        <el-input v-model="obj.payTime" readonly />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editCancel">关闭</el-button>
      </div>
    </template>
  </el-dialog>




</template>










<style scoped>
.search-card {
  margin-bottom: 20px;
}

.no-data-container {
  text-align: center;
  padding: 40px 20px;
}

.no-data-image {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

.no-data-text {
  font-size: 16px;
  color: #909399;
  margin: 0;
}
</style>
